<template>
	<view class="main">
		<view class="let_back" @tap="goBack">
			<u-icon name="arrow-left" size="70" color="#fffef9"></u-icon>
		</view>

		<!-- 轮播图 -->
		<u-swiper :list="listImg" mode="number" indicator-pos="bottomRight" height="700" name="image"
			@click="onPreview()"></u-swiper>
		<!-- 分类产品详情数据 -->
		<view class="cate_explain">
			<!-- 分类说明 -->
			<view class="cate_price">￥{{cateDetail.price?cateDetail.price:'__'}}</view>
			<view class="buzhong_mc">
				{{cateDetail.name?cateDetail.name:'__'}}
			</view>

			<u-read-more class="more_btn" color="red" close-text="展开了解详情" show-height="100" :toggle="true"
				ref="uReadMore" :shadow-style="shadowStyle" >
				<!-- <rich-text :nodes="content"></rich-text> -->
				<u-parse :html="content" @load="parseLoaded"></u-parse>
			</u-read-more>


			<u-button class="share_btn" @click="showShareFun" type="warning" plain :ripple="true" shape="circle">
				分享
			</u-button>
		</view>
		<!-- 分享弹窗 -->
		<share-popup :show="showShareBtn" @close="showShareBtn = false" :goods-id="navid" :img-url="listImg[0]"
			:summary="cateDetail.name" :share-title="cateDetail.name" :page="shareUrl"></share-popup>
		<!-- <u-sticky> -->
		<view class="cate_detail">
			<view class="cate_detail_title">布种详情</view>




			<view class="cate_detail_body">
				<view class="cate_detail_left">
					<!-- 布种 -->
					<view class="buzhong cate_d">
						布种：{{cateDetail.buzhong?cateDetail.buzhong:''}}
					</view>
					<!-- 克重 -->
					<view class="kezhong cate_d">
						克重：{{cateDetail.kezhong?cateDetail.kezhong:''}}
					</view>
					
					<!-- 幅宽 -->
					<view class="fukuan cate_d">
						幅宽：{{cateDetail.fukuan?cateDetail.fukuan:''}}
					</view>
					<view class="m_kg cate_d">
						每公斤出米数：{{cateDetail.m_kg?cateDetail.m_kg:''}}
					</view>
					<view class="jibie cate_d">
						成分：{{cateDetail.chengfen?cateDetail.chengfen:''}}
					</view>

				</view>

			</view>

			<div class="top_tools">
				<div class="top_circle">
					<span class="top_red top_box"></span>
				</div>
				<div class="top_circle">
					<span class="top_yellow top_box"></span>
				</div>
				<div class="top_circle">
					<span class="top_green top_box"></span>
				</div>
			</div>

			<!-- 手风琴 -->
			<div class="loader">
				<div class="slider" style="--i:0"></div>
				<div class="slider" style="--i:1"></div>
				<div class="slider" style="--i:2"></div>
				<div class="slider" style="--i:3"></div>
				<div class="slider" style="--i:4"></div>
			</div>

		</view>
		<!-- </u-sticky> -->


		<view class="toggle_switch">

		</view>

		<!-- 商品列表 -->
		<!-- <view class="goods_lists">
			<view class="goods" v-for="(item,index) in goodsList" :key="index">

				<view class="goods_img_box">

					<view class="goods_shadow">

					</view>
					<image class="goods_img" :src="item.image"></image>
				</view>
				<text class="goods_title">{{item.code}}</text>

			</view>
		</view> -->
		<GoodsListCircle v-if="isCircle" :goodsList="goodsList"></GoodsListCircle>
		<GoodsListSquare v-else :goodsList="goodsList"></GoodsListSquare>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />

		<!-- 返回顶部 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>


		<view class="callBox">
			<!-- <button open-type="contact" class="callMe">
				<u-icon name="chat-fill" color="#E1E1E1" size="100"></u-icon>

			</button> -->
			<button @tap="tapJumpSalesman" class="callMe">
				<u-icon name="chat-fill" color="#E1E1E1" size="100"></u-icon>
			
			</button>
			<view>客服</view>
		</view>



	</view>
</template>

<script>
	import sharePopup from '@/pages/bundle/share-popup/share-popup.vue';
	import GoodsListCircle from '@/pages/bundle/goodsList-circle/goodsList-circle.vue'
	import GoodsListSquare from '@/pages/bundle/goodsList-square/goodsList-square.vue'
	import {
		getCartNum,
		getGoodsSecondList,
		getCateSecond,
		catedetail,
		catedetailImg,
		getGoodsPaginate
	} from '@/api/store';

	import {
		strToParams
	} from '@/utils/tools';
	import {
		toLogin
	} from '@/utils/login';
	export default {
		components: {
			sharePopup,
			GoodsListCircle,
			GoodsListSquare
		},
		data() {
			return {
				// 轮播图
				listImg: [],
				status: 'loadmore',
				showShareBtn: false,
				showShare: true,
				isCircle:false,
				goodsDetail: {},
				shareUrl:'pages/bundle/categoryList/categoryList',
				navid: '',
				goodsList: [],
				pageNum: 1,
				per_page: Number,
				total: Number,
				cateDetail: null,
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '亲，已经到底了哦'
				},

				//返回顶部距离！！！
				scrollTop: 0,
				content: ``,
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				},

			};
		},
		//返回顶部！！！
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		async onLoad(options) {
			// if (!this.isLogin) return toLogin();
			if (options && options.scene) {
				let scene = strToParams(decodeURIComponent(options.scene));
				// console.log(scene, decodeURIComponent(options.scene))
				options.id = scene.id;
			}
			await this.getCateDetail(options.id)
			this.navid = options.id
			await this.getGoodsList();
			
			

		},
		onShow() {


			

		},
		
		methods: {

			//分类详情说明数据事件！！！
			parseLoaded() {
				this.$refs.uReadMore.init();
			},
			//分类产品分享按钮事件！！！
			showShareFun() {
				this.showShareBtn = true
				// console.log('点击了')
			},
			// 轮播图详情查看事件！！！
			onPreview(e) {
				// console.log(e)
				const ImgArray = [];
				this.listImg.forEach(val => {
					ImgArray.push(val);
				})
				uni.previewImage({
					current: ImgArray[e],
					urls: ImgArray
				})
			},
			// 获取二级分类
			async getCateDetail(id) {
				this.goodsList = []
				this.listImg = []

				const res = await catedetail({
					id: id
				})
				const imgs = await catedetailImg({
					id: id
				})

				this.$nextTick(() => {
					this.cateDetail = res.data[0]
					imgs.data.forEach((item, index) => {
						this.listImg.push(item.image)
					})
					this.content = this.cateDetail.content;
					if(res.data[0].isCircle == 0){
						this.isCircle = false;
					}else{
						this.isCircle = true;
					}
					 
				})


				this.$nextTick(() => {
					this.$refs.uReadMore.init();
				})


			},
			// 触底的事件
			onReachBottom() {
				if (this.pageNum * this.per_page >= this.total) {
					this.status = 'nomore';
					return;
				}
				this.status = 'loading';
				this.pageNum++;
				this.getGoodsList();
			},
			async getGoodsList() {
				const res = await getGoodsPaginate({
					id: this.navid,
					pageNum: this.pageNum
				})
				console.log(res, '获取商品列表成功')
				this.goodsList = [...this.goodsList, ...res.data.data];
				this.total = res.data.total;
				this.per_page = res.data.per_page;
				console.log(this.total, this.per_page);
				// if(res.code == 1){
				// 	this.noMoreEnd = '亲，没有更多了~'
				// }

			},

			goBack() {
				// uni.navigateBack();
				uni.switchTab({
					url: '/pages/sort/sort'
				});
			},

			async onShareAppMessage() {
				// const {
				// 	goodsDetail,
				// 	team,
				// 	userInfo
				// } = this;
				// return {
				// 	title: team.share_title || goodsDetail.name,
				// 	imageUrl: goodsDetail.image,
				// 	path: '/pages/goods_details/goods_details?id=' + this.id + "&invite_code=" + userInfo.distribution_code
				// };
				return {
					title: this.cateDetail.name,
					imageUrl: 'https://test.txjtapi.cn/' + this.cateDetail.image,
					path: 'pages/bundle/categoryList/categoryList?id=' + this.navid
				}
			},
			//进入业务员联系方式页面
			tapJumpSalesman(){
				// console.log("跳转到业务员联系页面");
				// uni.navigateTo({
				// 	url: 'pages/bundle/salesman_info/salesman_info',
				// 	fail(err){
				// 		console.log(err,"ERROR")
				// 	}
				// });
				uni.navigateTo({
					url: '/pages/bundle/salesman_info/salesman_info'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 弹窗背景透明化
	::v-deep  .u-drawer-top{
			background-color:transparent !important;			
		}
	page {
		padding-bottom: 0 !important;
	}

	.main {

		position: relative;
		background-color: #fff;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 106rpx + 6rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx);

	}

	// 返回上一页
	.let_back {
		position: absolute;
		left: 25rpx;
		top: 70rpx;
		z-index: 1;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		border: 1rpx solid #fffef9;
		background: transparent;
	}

	// 分类说明
	.cate_explain {
		width: 750rpx;
		min-height: 250rpx;
		background-color: #FFF8F2;
		padding: 0 50rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		//justify-content: space-evenly;
		//align-items: left;
		justify-content: center;
		align-items: center;

		border-radius: 0 0 15rpx 15rpx;
		box-shadow: 10rpx 10rpx 30rpx #bebebe;
		overflow: hidden;

		.cate_price {
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			font-size: 40rpx;
			color: #ee3f4d;
			//margin-top: 20rpx;
			z-index: 100;
		}

		.buzhong_mc {
			position: absolute;
			top: 80rpx;
			left: 20rpx;
			font-size: 40rpx;
			font-weight: 700;
			z-index: 100;
		}

		.more_btn {
			// position: absolute;
			// top: 150rpx;left: 20rpx;
			margin-top: 150rpx;
			z-index: 100;
		}

		.share_btn {
			// width: 150rpx;
			// height: 100rpx;
			// background-color: #B5FFFC;
			// border-radius: 30rpx;
			// text-align: center;
			// line-height: 100rpx;

			position: absolute;
			bottom: 50rpx;
			right: 30rpx;
			z-index: 100;
		}

		.fittingCheckBtn {
			position: absolute;
			top: 10rpx;
			right: 20rpx;
			z-index: 100;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

		}
	}

	.cate_explain::before {
		content: "";
		position: absolute;



		width: 20%;
		height: 350%;
		background: linear-gradient(#29b7cb, #ee2746, #fcd337, #de1c31);
		animation: rotate 15s linear infinite;
		overflow: hidden;
	}

	.cate_explain::after {
		content: "";
		position: absolute;
		background: #FFF8F2;
		inset: 5rpx;
		border-radius: 5rpx;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}


	// 手风琴
	.loader {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.slider {
			background-color: white;
			border: 1rpx solod rgba(128, 128, 128, 0.276);
			height: 80rpx;
			width: 20rpx;
			margin: 0 15rpx;
			border-radius: 30rpx;
			box-shadow:
				inset -5rpx -5rpx 10rpx #0000001a,
				inset 5rpx 5rpx 10rpx #0000001a;
			position: relative;
			overflow: hidden;
			z-index: 100;
		}

		.slider::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			height: 80rpx;
			width: 20rpx;
			background: #2697f3;
			animation: animate_2 5s ease-in-out infinite;
			animation-delay: calc(-0.5s*var(--i));
		}

		@keyframes animate_2 {
			0% {
				transform: translateY(80rpx);
				filter: hue-rotate(0deg);
			}

			50% {
				transform: translateY(20rpx);
			}

			100% {
				transform: translateY(80rpx);
				filter: hue-rotate(360deg);
			}
		}

	}

	//分类详情说明
	.cate_detail {

		width: 700rpx;
		margin: 30rpx auto;
		border-radius: 50rpx;
		padding: 20rpx 30rpx;
		background-image: linear-gradient(to right, #FFDEE9, #B5FFFC);
		box-shadow: 10rpx 10rpx 10rpx #bebebe, -10rpx -10rpx 30rpx #eee;
		position: relative;

		.cate_detail_title {
			margin: 20rpx 0;
			color: red;
			font-weight: 700;
		}

		.cate_detail_body {
			font-style: italic;
			display: flex;
			justify-content: space-between;
			margin: 0 20rpx;

			.cate_d {
				margin-top: 10rpx;
				color: #cd7f32;
			}
		}
	}

	//商品列表
	// .goods_lists {
	// 	background-color: #fff;
	// 	display: flex;
	// 	flex-wrap: wrap;

	// 	.goods {
	// 		width: 187.5rpx;
	// 		height: 187.5rpx;
	// 		margin: 10rpx 0;
	// 		display: flex;
	// 		flex-direction: column;
	// 		justify-content: center;
	// 		align-items: center;


	// 		.goods_img_box {
	// 			position: relative;

	// 			width: 150rpx;
	// 			height: 150rpx;
	// 			overflow: hidden;
	// 			border-radius: 50%;

	// 			// box-shadow: inset 25rpx 25rpx 50rpx #b5b6b8,inset -25rpx -25rpx 50rpx #ffffff;
	// 			.goods_shadow {
	// 				position: absolute;

	// 				top: 0;
	// 				left: 0;
	// 				background: transparent;
	// 				width: 100%;
	// 				height: 100%;
	// 				overflow: hidden;
	// 				border-radius: 50%;
	// 				box-shadow: inset 3rpx 3rpx 5rpx #818283, inset -3rpx -3rpx 5rpx #ffffff;
	// 			}

	// 			.goods_img {
	// 				width: 150rpx;
	// 				height: 150rpx;
	// 			}
	// 		}

	// 		.goods_title {
	// 			font-size: 24rpx;
	// 		}
	// 	}
	// }

	.top_tools {

		position: absolute;
		top: 0;
		left: 20rpx;
		display: flex;
		align-items: center;
		padding: 9rpx;

		.top_circle {
			padding: 0 10rpx;

			.top_box {
				display: inline-block;
				align-items: center;
				width: 10rpx;
				height: 10rpx;
				padding: 1rpx;
				border-radius: 50%;
			}

			.top_red {
				background-color: #ff605c;
			}

			.top_yellow {
				background-color: #ffbd44;
			}

			.top_green {
				background-color: #00ca4e;
			}
		}
	}

	//客服
	.callBox {

		position: fixed;
		right: 30rpx;
		bottom: 300rpx;

		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 100;
		color: #E1E1E1;

		.callMe {
			width: 100rpx;
			height: 100rpx;


		}
	}
</style>